<template>
    <div class="index-page">
        <div style="width:60%;margin:0">
            <div class="statistic">
                <h1>统计</h1>
                <div class="statistic-list">
                    <a-row :gutter="[16,16]">
                        <a-col :span="8">
                            <div class="item">
                                <div class="icon-wrap">
                                    <team-outlined />
                                </div>
                                <div class="num">
                                    <a-statistic title="历史人口" :value="total" style="margin-right: 50px" />
                                </div>
                                <div class="clear"></div>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="item">
                                <div class="icon-wrap">
                                    <user-outlined />
                                </div>
                                <div class="num">
                                    <a-statistic title="健在人口" :value="alive" />
                                </div>
                                <div class="clear"></div>
                            </div>
                        </a-col>
                        <a-col :span="8">
                            <div class="item today" @click="getTodayBirth">
                                <div class="icon-wrap">
                                    <gift-outlined />
                                </div>
                                <div class="num">
                                    <a-statistic title="今日生日" :value="birthToday" />
                                </div>
                                <div class="clear"></div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </div>
            <h1>
                <a-button type="link" @click="ctEditVisible=true"><edit-outlined />编辑</a-button>
                简介
            </h1>
            <div class="content" v-html="content"></div>
        </div>

        <a-drawer title="编辑首页" placement="right" width="50%" class="edit-drawer" :visible="ctEditVisible" :closable="false" @close="closeDrawer">
            <div class="ctrls">
                <a-button style="margin-right: 8px" @click="closeDrawer">取消</a-button>
                <a-button type="primary" @click="updateContent">提交</a-button>
            </div>
            <div>
                <vue3-tinymce v-model="eCtContent" :setting="edSetting" />
            </div>
        </a-drawer>

        <a-modal v-model:visible="memberVisible" title="今日生日" @ok="cancelEdit" :width="800" :centered="true" @cancel="cancelEdit">
            <a-table 
            :dataSource="list" 
            :row-key="record=>record.id"
            >
                <a-table-column key="name" title="姓名" data-index="name">
                    <template #default="{ text }">
                        {{familyName}}{{text}}
                    </template>
                </a-table-column>
                <a-table-column key="gName" title="辈分" data-index="gName"></a-table-column>
                <a-table-column key="sex" title="性别" data-index="sex">
                    <template #default="{ text }">
                        <span v-if="text===1">男</span>
                        <span v-else>女</span>
                    </template>
                </a-table-column>
                <a-table-column key="birthday" title="出生日期" data-index="birthday"></a-table-column>
                <a-table-column key="merry" title="婚否" data-index="merry">
                    <template #default="{ text }">
                        <span v-if="text===1">已婚</span>
                        <span v-else>未婚</span>
                    </template>
                </a-table-column>
            </a-table>
        </a-modal>
    </div>
</template>

<script>
import Http from '@/until/http';
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import { EditOutlined,GiftOutlined,UserOutlined,TeamOutlined } from '@ant-design/icons-vue';
import { messageTips } from '@/until/tools';

export default defineComponent({
    components:{Vue3Tinymce,EditOutlined,GiftOutlined,UserOutlined,TeamOutlined},
    setup() {
        const state = reactive({
            content:'',
            eCtContent:'',
            ctEditVisible:false,
            total:0,
            alive:0,
            birthToday:0,
            list:[],
            memberVisible:false
        })

        const edSetting = reactive({
            menubar: false,
            height: '600',
            toolbar:
            "bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen",
            plugins: "codesample link image table lists fullscreen",
            toolbar_mode: "sliding",
            nonbreaking_force_tab: true,
            link_title: false,
            default_link_target: "_blank",
            content_style: "body{font-size: 16px}",
            // 自定义 图片上传模式
            custom_images_upload: true,
            images_upload_url: "your_upload_api_url...",
            custom_images_upload_callback: (res) => res.url,
            custom_images_upload_param: { id: "xxxx01", age: 18 }
        })

        const closeDrawer=()=>{
            state.ctEditVisible = false
        }

        const updateContent=()=>{
            Http.updateSinglePage({id:1,content:state.eCtContent}).then(res=>{
                if(res) {
                    if(res.success) {
                        state.ctEditVisible = false;
                        messageTips(res.message,3);
                        getContent();
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        const getTodayBirth = ()=>{
            Http.getTodayBirthMember().then(res=>{
                if(res) {
                    Object.assign(state,{
                        list:res.list,
                        memberVisible:true
                    })
                }
            });
        }

        const getContent=()=>{
            Http.getSinglePageContent({id:1}).then(res=>{
                if(res) {
                    if(res.content) {
                        Object.assign(state,{
                            content:res.content,
                            eCtContent:res.content
                        })
                    }
                }
            });
            Http.getCount().then(res=>{
                if(res) {
                    Object.assign(state,{
                        total:res.total,
                        alive:res.liveTotal,
                        birthToday:res.today
                    })
                }
            });
        }

        const cancelEdit = ()=>{
            Object.assign(state,{
                memberVisible:false
            })
        }

        onMounted(()=>{
            getContent();
        })

        return {
            ...toRefs(state),
            closeDrawer,
            edSetting,
            updateContent,
            getTodayBirth,
            cancelEdit
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/scss/_variables.scss';
    h1 {
        font-weight: bold;
        font-size: 18px;
        background:rgba($color: $primary-color, $alpha: 0.3);
        padding:5px 10px;

        .ant-btn-link {
            float:right;
        }
    }
    .statistic {
        margin-bottom: 20px;
        .item {
            background:rgba($color: $primary-color, $alpha: 0.1);
            padding:20px;
            border-radius: 3px;
            .icon-wrap {
                float:left;
                font-size:40px;
            }
            .num {
                float:right;
            }
        }
        .item:hover {
            background:rgba($color: $primary-color, $alpha: 0.3);
        }
        .today {
            cursor: pointer;
        }
    }
    .content {
        padding:20px;
        background:rgba($color: $primary-color, $alpha: 0.1);
    }
</style>